<template>
  <Form
    ref="accountForm"
    :model="form"
    :rules="rules"
    @keydown.enter.native="handleSubmit"
    inline
    :label-width="85">
    <FormItem prop="uname" style="width: 250px" label="用户姓名：">
      <Input type="text" v-model="form.uname" placeholder="请输入用户姓名" />
    </FormItem>
    <FormItem prop="role" label="角色筛选：" style="width: 250px">
      <Select v-model="form.role" clearable>
        <Option value="all">
          全部
        </Option>
        <Option v-for="item in roleList" :value="item.role" :key="item.id">
          {{ item.gname }}
        </Option>
      </Select>
    </FormItem>
    <FormItem style="float: right;">
      <Button @click="handleSubmit" icon="md-search" type="primary">
        搜索
      </Button>
    </FormItem>
  </Form>
</template>
<script>
import {
  mapState,
  mapActions,
  mapMutations
} from 'vuex'
export default {
  name: 'AccountForm',
  props: {
    nameRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    roleRules: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      form: {
        uname: '',
        role: 'all'
      }
    }
  },
  computed: {
    rules () {
      return {
        uname: this.nameRules,
        role: this.roleRules
      }
    },
    ...mapState({
      roleList: state => state.role.roleList
    })
  },
  methods: {
    handleSubmit () {
      this.$refs.accountForm.validate((valid) => {
        if (valid) {
          this.$emit('on-success-valid', {
            uname: this.form.uname,
            role: this.form.role && this.form.role !== 'all' ? parseInt(this.form.role) : ''
          })
        }
      })
    }
  }
}
</script>
